<template>
	<view class="flex-col page">
	  
	  <view class="flex-col group">
		<view class="flex-row justify-between items-center section">
		  <view class="flex-col items-start">
			<text class="font text text_2">当前余额</text>
			<text class="text text_4 mt-15">￥{{ ye_money }}</text>
		  </view>
		  <view class="flex-col justify-start items-center text-wrapper" @click="open_tx()">
			<text class="font_2 text text_3">提现</text>
		  </view>
		</view>
		<view class="mt-10 flex-col section_2">
		  <text class="self-start font_2 text text_5">余额明细</text>
			<view  v-for="(item, index) in ye_list" :key="index" >
				<view class="flex-row justify-between self-stretch group_2">
				<view class="flex-row items-center">
				<text class="font_2 text">{{ item.type == 1?'佣金收入':'提现' }}</text>
				<text class="font text ml-14-5">{{$util.timeStampTurnTime(item.create_time,'mo')}}</text>
				</view>
				<text class="text text_7" :class="item.type == 1?'font_4':'font_3'">{{ item.type == 1?'+':'-' }}{{ item.money }}</text>
			</view>
		  </view>
		  
		  
		</view>
	  </view>
	  <!-- 提现弹窗 -->
		<u-popup :show="show_popup" mode="bottom" :round="20"  bgColor="#f2f6f7"
			@close="show_popup = false" closeable="true">
			<view class="flex-col popup">
				<view class="flex-col justify-start section pos">
					<view class="flex-col section_4">
						<text class="self-center font_2 text">提现</text>
						<view class="flex-row justify-between items-center self-stretch group_5">
						<view class="flex-row items-center group_6 ">
							<text class="font_2 text text_10">￥</text>
							<u--input placeholder="请输入提现金额" border="none" type="number" v-model="tx_number"
							@change="numChange" ></u--input>
							
						</view>
						<text class="font_4 text text_11" @click="tx_all">全部提现</text>
						</view>
						<view>
							<u-form :model="txInfo" ref="uForm">
								<u-form-item
									label="姓名"
									prop="txInfo.user_name"
									borderBottom
									ref="item1"
									:labelWidth="labelWidth"
							>
								<u--input
										v-model="txInfo.user_name"
								></u--input>
							</u-form-item>
							<u-form-item
									label="所属银行"
									prop="txInfo.yh_name"
									borderBottom
									ref="item1"
									:labelWidth="labelWidth"
							>
								<u--input
										v-model="txInfo.yh_name"
										
								></u--input>
							</u-form-item>
							<u-form-item
									label="银行卡号"
									prop="txInfo.yh_card"
									borderBottom
									ref="item1"
									:labelWidth="labelWidth"
							>
								<u--input
										v-model="txInfo.yh_card"
										type="number"
										:formatter="formatNumber"
								></u--input>
							</u-form-item>
							<u-form-item
									label="手机号"
									prop="txInfo.tx_telphone"
									borderBottom
									ref="item1"
									:labelWidth="labelWidth"
							>
								<u--input
										v-model="txInfo.tx_telphone"
										type="number"
										:formatter="formatNumber"
								></u--input>
							</u-form-item>
							</u-form>
							
						</view>
						
						<view class="flex-col justify-start items-center self-stretch text-wrapper_2">
						<text class="text text_12" @click="tx_sub">立即提现</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
  </template>
  
  <script>
	export default {
	  components: {},
	  props: {},
	  data() {
		return {
			ye_list:[],
			userInfo: [],
			show_popup:false,
			tx_number:'',
			txInfo:{},
			labelWidth:'80',
			ye_money:''
		};
	  },
	  onShow(){
		this.userInfo = uni.getStorageSync('userInfo');
		this.getyeinfo()
		
	  },
	  methods: {
		numChange(){
			this.tx_number = parseFloat(this.tx_number)
		},
		getyeinfo(){
			var url = '/api/index/yeInfo'
			this.$api.sendRequest({
				url: url,
				data: {
					user_id: this.userInfo.id
				},
				success: res => {
					//console.log(res.code)
					if (res.code == 1) {
						this.ye_list = {...res.data.ye_list};
						this.ye_money = res.data.user_money
					}
				}
			});
		},
		formatNumber(value) {
			// 只保留数字和小数点
			return value.replace(/[^0-9.]/g, '');
		},
		//提现弹窗
		open_tx(){
			this.show_popup = true;
			this.tx_number = '';
			this.txInfo.tx_telphone = this.userInfo.mobile
		},
		//全部提现触发
		tx_all(){
			this.tx_number = this.userInfo.money
		},
		
		//提现提交
		tx_sub(){
			var url = '/api/index/yetx_send'
			this.txInfo.user_id = this.userInfo.id
			this.txInfo.tx_number = this.tx_number
			this.txInfo.money = this.userInfo.money
			let data = {...this.txInfo}
			this.$api.sendRequest({
				url: url,
				data,
				success: res => {
					//console.log(res.code)
					if (res.code == 1) {
						//this.ye_list = {...res.data};
						uni.showToast({
							title: res.msg, // 提示内容
							icon: 'success',   // 图标类型：'success' 或 'none'
							duration: 2000     // 持续时间（毫秒）
						});
						this.show_popup = false,
						this.txInfo = {}
					}else{
						uni.showToast({
							title: res.msg, // 提示内容
							icon: 'none',   // 图标类型：'success' 或 'none'
							duration: 2000     // 持续时间（毫秒）
						});
					}
					this.getyeinfo();
				}
			});
		}
	  },
	};
  </script>
  
  <style scoped lang="scss">
	.ml-14-5 {
	  margin-left: 29rpx;
	}
	.mt-15 {
	  margin-top: 30rpx;
	}
	.page {
	  background-color: #00000000;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	  .image-wrapper {
		padding: 34rpx 0 21rpx;
		background-color: #ffffff;
		.image {
		  margin-right: 12rpx;
		  width: 671rpx;
		  height: 140rpx;
		}
	  }
	  .group {
		padding: 20rpx 9rpx 0;
		.section {
		  margin: 0 7rpx;
		  padding: 39rpx 32rpx 42rpx;
		  background-color: #ffffff;
		  border-radius: 10rpx;
		  .text_2 {
			margin-left: 6rpx;
			color: #141414;
			line-height: 23rpx;
		  }
		  .text_4 {
			color: #141414;
			font-size: 36rpx;
			font-family: PingFangSC;
			font-weight: 500;
			line-height: 33rpx;
		  }
		  .text-wrapper {
			padding: 16rpx 0;
			background-color: #00806b;
			border-radius: 29rpx;
			width: 199rpx;
			height: 58rpx;
			.text_3 {
			  color: #ffffff;
			}
		  }
		}
		.section_2 {
		  margin-right: 14rpx;
		  padding: 39rpx 22rpx 123rpx 37rpx;
		  background-color: #ffffff;
		  border-radius: 10rpx 10rpx 0 0;
		  .text_5 {
			font-weight: 500;
			line-height: 27rpx;
		  }
		  .group_2 {
			margin-top: 40rpx;
			.text_6 {
			  line-height: 25rpx;
			}
		  }
		  .group_3 {
			padding: 42rpx 0 24rpx;
			border-top: solid 3rpx #eeeeee;
			.text_7 {
			  line-height: 25rpx;
			  color:#00806b;
			}
		  }
		  .view {
			margin-top: 25rpx;
		  }
		  .group_4 {
			padding: 33rpx 0 24rpx;
			border-top: solid 3rpx #eeeeee;
			.text_8 {
			  line-height: 25rpx;
			}
		  }
		  .font_3 {
			font-size: 28rpx;
			font-family: PingFangSC;
			line-height: 26rpx;
			color: #000000;
		  }
		  .group_5 {
			padding: 34rpx 0 24rpx;
			border-top: solid 3rpx #eeeeee;
			.text_9 {
			  line-height: 25rpx;
			}
		  }
		  .group_6 {
			padding: 42rpx 0 25rpx;
			border-top: solid 3rpx #eeeeee;
			border-bottom: solid 3rpx #eeeeee;
			.text_10 {
			  line-height: 25rpx;
			}
		  }
		  .font_4 {
			font-size: 28rpx;
			font-family: PingFangSC;
			line-height: 26rpx;
			color: #00806b;
		  }
		}
		.font_2 {
		  font-size: 28rpx;
		  font-family: PingFangSC;
		  line-height: 26rpx;
		  color: #141414;
		}
		.text {
		  text-transform: uppercase;
		}
		.font {
		  font-size: 24rpx;
		  font-family: PingFangSC;
		  line-height: 19rpx;
		  color: #999999;
		}
	  }
	  /*提现弹出层样式*/
	  .section {

		.section_4 {
			padding: 48rpx 33rpx 54rpx;
			background-color: #ffffff;
			border-radius: 10rpx 10rpx 0 0;
			.group_5 {
			margin-top: 63rpx;
			padding-bottom: 28rpx;
			border-bottom: solid 3rpx #eeeeee;
			.group_6 {
				line-height: 28rpx;
				height: 28rpx;
				.text_10 {
				line-height: 22rpx;
				}
				.text_9 {
				color: #999999;
				line-height: 28rpx;
				}
			}
			.text_11 {
				margin-right: 3rpx;
			}
			}
			.text-wrapper_2 {
			margin: 259rpx 30rpx 0;
			padding: 24rpx 0;
			background-color: #00806b;
			border-radius: 40rpx;
			.text_12 {
				color: #ffffff;
				font-size: 36rpx;
				font-family: PingFangSC;
				line-height: 34rpx;
			}
			}
		}
		}
	}
  </style>